<template>
  <div>
    <h2>体校类别</h2>
    <div ref="chart" style="width: 100%; height: 300px;"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "SchoolType",
  data() {
    return {
      chartInstance: null,
      chartData: {
        title: {
          text: "全国体校数量/所"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        xAxis: {
          data: ["省级", "地市级", "县级"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "省级",
            type: "bar",
            stack: "总量",
            data: [34201, 0, 0],
            color: "#3398DB"
          },
          {
            name: "地市级",
            type: "bar",
            stack: "总量",
            data: [0, 9285, 0],
            color: "#578DD5"
          },
          {
            name: "县级",
            type: "bar",
            stack: "总量",
            data: [0, 0, 4257],
            color: "#80B8F1"
          }
        ]
      }
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (this.chartInstance) {
      this.chartInstance.dispose();
    }
  },
  methods: {
    initChart() {
      this.chartInstance = echarts.init(this.$refs.chart);
      this.chartInstance.setOption(this.chartData);
    }
  }
};
</script>

<style scoped>
h2 {
  margin-bottom: 20px;
}
</style>
